<html>
  <body>
    <audio></audio>
    <script>
      var audio = document.querySelector('audio'),
      mediaSource = new MediaSource();
      audio.src = URL.createObjectURL(mediaSource);

      audio.onended = function() { document.title = 'ended'; }
      audio.onerror = function() { document.title = 'media element error'; }

      // Play two files with different sample rate to force mid-stream
      // re-initialization.
      var files = ["bear-44.1kHz.webm", "bear-48kHz.webm"];

      mediaSource.addEventListener('sourceopen', function() {
        var index = 0;
        var sourceBuffer = mediaSource.addSourceBuffer('audio/webm;codecs="vorbis"');
        sourceBuffer.addEventListener('updateend', function (_) {
          if (++index == files.length) {
            mediaSource.endOfStream();
            return;
          }
          loadFile(sourceBuffer, index);
        });

        loadFile(sourceBuffer, index);
      });

      function loadFile(sourceBuffer, index) {
        var xhr = new XMLHttpRequest;
        xhr.open('GET', './' + files[index]);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function() {
            if (this.status != 200) {
              console.error('Failed to fetch the file ' + files[index]);
              return;
            }
            sourceBuffer.timestampOffset = index;
            sourceBuffer.appendBuffer(this.response);
        };
        xhr.send();
      }

      audio.play();
    </script>
  </body>
</html>
